<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div>
  <div class="storage-policy">
    {{ 'system_storage_policy_selection_label' | i18n }}
  </div>
  <div>
    <lv-alert lvType="info" lvClosable="false">
      {{ 'system_backup_policy_lanfree_tips_label' | i18n }}
    </lv-alert>
  </div>
  <lv-form [formGroup]="timeForm" class="formGroup" lvLayout="horizontal">
    <lv-form-item>
      <lv-form-label></lv-form-label>
      <lv-form-control>
        <lv-group>
          <lv-radio-group
            #group
            formControlName="storageStrategyType"
            [lvGroupName]="'group1'"
          >
            <lv-group lvGutter="30px">
              <ng-container *ngFor="let d of data">
                <lv-radio [lvViewType]="'custom'" [lvValue]="d.value">
                  <div
                    class="card-box"
                    [ngClass]="{ select: group.isChecked(d.value) }"
                  >
                    <h3 class="box-title">{{ d.label }}</h3>
                    <div class="box-content">
                      <p>{{ d.content | i18n}}</p>
                    </div>
                  </div>
                </lv-radio>
              </ng-container>
            </lv-group>
          </lv-radio-group>
        </lv-group>
      </lv-form-control>
    </lv-form-item>
  </lv-form>

  <div
    class="table-container"
    [ngClass]="{
      visible: timeForm.value.storageStrategyType !== 4,
      hidden: timeForm.value.storageStrategyType === 4
    }"
  >
    <div class="table-title">
      {{ 'system_sort_selected_units_label' | i18n }}
    </div>
    <lv-group>
      <lv-datatable [lvData]="tableData" #lvTable>
        <thead>
          <tr>
            <th>{{ 'common_name_label' | i18n }}</th>
            <th>{{ 'common_health_status_label' | i18n }}</th>
            <th>{{ 'protection_running_status_label' | i18n }}</th>
            <th>
              {{ 'common_capacity_label' | i18n }}
            </th>
            <th>{{ 'common_alarm_threshold_label' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of lvTable.renderData">
            <tr>
              <td>{{ item.name }}</td>
              <td>
              <div lv-overflow>
                <td>
                  <aui-status [value]="item.healthStatus" type="HealthStatus"></aui-status>
                </td>
              </div>
            </td>
            <td>
              <div lv-overflow>
                <td>
                  <aui-status [value]="item.runningStatus" type="StoragePoolRunningStatus"></aui-status>
                </td>
              </div>
            </td>
            <td>
              <div class='percent-bar'>
                <lv-progress [lvValue]="Math.round (item.usedCapacity / item.totalCapacity * 10000) / 100" [lvSize]="'small'" [lvColors]='progressBarColor'
                             [lvLabel]="progressLabelTpl" lvDecimals="3"></lv-progress>
                <div class='size-percent'>
                  {{item.usedCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
                        true}}/{{item.totalCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
                        true}}
                </div>
              </div>
            </td>
            <td>{{ item.threshold  + '%' }}</td>
          </tr>
          </ng-container>
        </tbody>
      </lv-datatable>
    </lv-group>
  </div>
</div>

<ng-template #extraTpl>
  <i lv-icon="lv-icon-more" class="ui-card-extra"></i>
</ng-template>

<ng-template #progressLabelTpl let-data>
  {{ data < 0.001 ? (data == 0 ? 0 : lessThanLabel + '0.001') : data }}%
</ng-template>
